Force reload blazor component

In this video we will discuss how to force reload blazor component. When a blazor component is used for multiple workflows, this feature allows us to refresh the component, so the user can see the elements that are changed dynamically.

Uisng a blazor component for multiple workflows

For example, EditEmployee component is used for the following 2 workflows

1. Editing existing employee data
2. Creating a new employee

In the following example, PageHeader is set to Create Employee if EmployeeId is 0, otherwise Edit Employee

[Parameter]
public string Id { get; set; }

public string PageHeader { get; set; }

protected async override Task OnInitializedAsync()
{
    int.TryParse(Id, out int employeeId);

    if (employeeId != 0)
    {
        PageHeader = "Edit Employee";
        Employee = await EmployeeService.GetEmployee(int.Parse(Id));
    }
    else
    {
        PageHeader = "Create Employee";
        Employee = new Employee
        {
            DepartmentId = 1,
            DateOfBrith = DateTime.Now,
            PhotoPath = "images/nophoto.jpg"
        };
    }
}

The view binds to the PageHeader property

<h3>@PageHeader</h3>

Why force-reload blazor component

If your navigation flow is the following, then the PageHeader text changes from Edit Employee to Create Employee as expected.

1. Navigate to EditEmployee Component (for editing existing employee data). 
2. Navigate to a different component, for example ListEmployees component.

1. Navigate to EditEmployee Component (for creating a new employee).

However, if your navigation flow is the following, then the PageHeader text is not refreshed.

1. Navigate to EditEmployee Component (for editing existing employee data)
2. Navigate to EditEmployee Component (for creating a new employee).

Force reload blazor nav link

When you are already on EditEmployee component, and when the <NavLink> element is clicked, it does not send the request to the server, the redirection happens on the client. Hence, nothing on the page updates.

<NavLink class="nav-link" href="/editemployee">
    <span class="oi oi-file" aria-hidden="true"></span> Create
</NavLink>

To fix this

1. Include onclick event handler
2. NavigationManager.NavigateTo() method has a boolean forceLoad parameter.
3. The default value is false. Pass true to this parameter.
4. This will by-pass client-side routing and forces the browser to load the component from the server.

<NavLink class="nav-link" href="/editemployee" @onclick="HandleClick">
    <span class="oi oi-file" aria-hidden="true"></span> Create
</NavLink>

@code {
    @inject NavigationManager NavigationManager;

    private void HandleClick()
    {
        NavigationManager.NavigateTo("editemployee", true);
    }
}

Blazor navigation menu selected style

The following are the 2 routes to get to EditEmployee component. When a value for employee id is passed in the URL, the component is used for editing else for creating a new employee.

@page "/editemployee/{id}"
@page "/editemployee"

The following are the 2 navigation menu items

<NavLink class="nav-link" href="/editemployee" @onclick="HandleClick">
    <span class="oi oi-file" aria-hidden="true"></span> Create
</NavLink>

<NavLink class="nav-link" href="/editemployee/1">
    <span class="oi oi-file" aria-hidden="true"></span> Edit
</NavLink>

The URL (/editemployee/1) matches both the navigation menu items (Create & Edit) and as a result, selected style is applied to both.

To fix this set Match="NavLinkMatch.All" on both the menu items

<NavLink class="nav-link" href="/editemployee" @onclick="HandleClick"
         Match="NavLinkMatch.All">
    <span class="oi oi-file" aria-hidden="true"></span> Create
</NavLink>

<NavLink class="nav-link" href="/editemployee/1"
         Match="NavLinkMatch.All">
    <span class="oi oi-file" aria-hidden="true"></span> Edit
</NavLink>

• NavLinkMatch.All, specifies that the selected style must be applied to the NavLink when it matches the entire current URL.
• NavLinkMatch.Prefix specifies that the selected style must be applied to the NavLink when it matches any prefix of the current URL.